<!-- 自定义组 使用在场景页和评测指标页 -->
<template>
  <div class="custom-group-wrap">
    <p class="scene-left-title custom-group-title">
      <span> 自定义组 </span>

      <span class="icon-group" v-show="!fromCreateTaskPage">
        <span class="add-group-icon" @click="handleCreateGroup">
          <i class="el-icon-plus"></i> 
        </span> 
        <span :class="[{'disabed-icon': !checkedCustomGroup.id},'add-group-icon']" @click="handleEditGroup">
          <i :class="[{'disabed-point': !checkedCustomGroup.id},'el-icon-edit']"></i> 
        </span> 
        <span :class="[{'disabed-icon': !checkedCustomGroup.id},'add-group-icon']" @click="handleDeleteGroup">
          <i :class="[{'disabed-point': !checkedCustomGroup.id},'el-icon-delete']" ></i> 
        </span> 
      </span>
    </p>
     <!-- 增加 -->
    <div class="input-add" v-show="isShowAddInput">
      <el-input 
        ref="addGroupInput" 
        v-model="inputName" 
        size="mini"
        placeholder="请输入组名称"
        @blur="cancelInput"
        @keyup.enter.native="submitCreateGroup" />
    </div>
    <ul class="custom-group-ul">
      <li :class="{'active-li': checkedCustomGroup.id === item.id && !isShowEditInput}" v-for="(item,index) in customGroups" :key="index" @click="handleClickGroup(item)">
        <!-- 修改 -->
        <div class="input-add" v-if="isShowEditInput && checkedCustomGroup.id === item.id">
          <el-input 
            ref="myEditInput" 
            v-model="editInputName" 
            size="mini"
            placeholder="请输入组名称"
            @blur="cancelInput"
            @keyup.enter.native="submitEditGroup" />
        </div>
        <div v-else>
          <el-tooltip effect="dark" :content="item.name" placement="bottom" :open-delay="500">
          <span v-if="fromCreateTaskPage"> 
            <el-checkbox :checked="isInclude(item.id)" @change="checked => changeCustomGroupChecked(checked,item.id)"></el-checkbox> &nbsp;
             {{ item.name }}
          </span>
          <span v-else> 
            <!-- <el-icon class="el-icon-folder-opened"></el-icon> -->
            <i class="iconfont icon-file"></i>
            {{ item.name }} </span>
        </el-tooltip>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
 import {v4 as uuid} from "uuid"
 import {mapState} from 'vuex'
  export default{
    name: 'CustomGroup',
    data(){
      return {
        isShowAddInput: false,
        isShowEditInput: false,
        inputName:'',
        editInputName:'',
      }
    },
    props: {
      fromCreateTaskPage: Boolean,
      customGroups:Array,
      closeEditInput: Boolean
    },
    computed:{
      ...mapState({
        checkedCustomGroup: state => state.scene.checkedCustomGroup,
        caseGroupIds: state => state.case.caseGroupIds,
      })
    },
    watch: {
      closeEditInput(val){
        if(val){
          this.isShowEditInput = false
          this.cancelInput()
        }
      }
    },
    methods:{
      changeCustomGroupChecked(value,id){
        if(value){
          this.caseGroupIds.push(id)
           //  将勾选的 自定义组 push 到组里 存入store
          this.$store.dispatch('case/setSelectedCaseGroupIds', this.caseGroupIds)
        }else{
          //  取消勾选，将 组里的 该项去除，然后将组 存入store
          let index = this.caseGroupIds.indexOf(id)
          if(index >-1){
            this.caseGroupIds.splice(index,1)
          }
          this.$store.dispatch('case/setSelectedCaseGroupIds', this.caseGroupIds)
        }
      },
      // 自定义组 勾选回显
      isInclude(id){
        if(this.caseGroupIds.includes(id)){
          return true
        }else {
          return false
        }
      },
      // 点击icon 去增加input
      handleCreateGroup(){
        this.isShowAddInput = true
        this.$nextTick(() => {
          this.$refs['addGroupInput'].focus()
        })
      },
      // 取消input输入
      cancelInput(){
        this.inputName = ''
        this.editInputName = ''
        this.isShowAddInput = false
        this.isShowEditInput =false
      },
      // 提交 创建的group
      submitCreateGroup(){
        if(!this.inputName) {
          this.cancelInput()
          return
        }
        let group = {id: uuid(), name: this.inputName } 
        this.$emit('handleCreateGroup', group)
        this.cancelInput()
      },
      handleClickGroup(data){
        // 点击tree 告知右侧为 自定义组
        this.$emit('handleClickCustomGroup',data)
      },
      handleEditGroup(){
        if(!this.checkedCustomGroup.id){
          this.$message.warning('请先选中需要编辑的组')
          return
        }
        this.isShowEditInput = true
        this.editInputName = this.checkedCustomGroup.name
      },
      // 提交 编辑的group
      submitEditGroup(){
        if(!this.editInputName) {
          this.cancelInput()
          return
        }
        const params = {id:this.checkedCustomGroup.id,name: this.editInputName}
        this.$emit('handleEditCustomGroup',params)
      },
      handleDeleteGroup(){
        if(!this.checkedCustomGroup.id){
          this.$message.warning('请先选中需要删除的组')
          return
        }
        this.$emit('handleDeleteCustomGroup',this.checkedCustomGroup)
      }
    }
  }
</script>
<style lang="scss" scoped>
 @import '@/styles/vars.scss' ;
     .scene-left-title{
     color: #293b5a;
     padding: 21.5px;
     font-size: 13px;
     font-family: Source Han Sans CN;
     font-weight: 600;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   }
   .scene-left-ul{
     // padding: 20px;
     >li {
       padding: 10px 0;
       cursor: pointer;
       i{
         margin-left: 20px;
       }
       span {
         margin-left: 5px;
       }
       &.active{
         background-color: rgb(74, 144, 226);
         color: #fff;
       }
     }
   }
   .custom-group-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .disabed-icon{
        cursor: not-allowed !important;
        opacity: 0.6;
      }
      .disabled-point{
        pointer-events: none !important;
      }
    .add-group-icon{
      width: 20px;
      display: inline-block;
      height: 20px;
      background: $primary-color;
      margin-right: 6px;
      cursor: pointer;
      color: $white;
      text-align: center;
      border-radius: 3px;
      line-height: 20px;
      &:last-child{
        margin-right: 0;
      }
      &:hover{
        background: $primary-hover-color;
      }
    }

   }
   .input-add{
    padding: 10px 20px;
   }
   .custom-group-ul{
    
    > li{
      padding: 10px 20px;
      line-height: 1.8;
      font-size: 14px;
      color: #606266;
      .input-add{
        padding:0;
      }
      &:hover{
        cursor: pointer;
        background-color: #F5F7FA;
      }
      &.active-li{
        // background:linear-gradient(to right,$primary-color,$white);
        color: $primary-color;
        font-weight: bold;
      }
    }
   }
</style>
